<template>
  <div>
    <div id="nav">
      <span :class="{active: now==i}" @click="now=i" v-for="(nav,i) in navs" :key="i">{{nav}}</span>
      <h3>now:{{now}}</h3>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        navs:['首页','关于我们','公司动态','产品中心','联系我们'],
        now:0, //当前激活的序号
      }
    },
  }
</script>

<style lang="scss" scoped>
#nav{
  background-color: darkblue;
  display: flex;
  span{
    padding: 20px 25px;
    color: white;
    user-select: none;
    // &:并且；相当于 sapn.active
    &.active{
      background-color: orange;
    }
  }
}
</style>